<!-- 欢迎提示词 -->
<script setup lang="ts">
import { Collection, SetUp, Tools } from '@element-plus/icons-vue';
import { ref } from 'vue';
import ToolFormDialog from '@/components/ToolFormDialog/index.vue';
import { useSystemStore } from '@/stores';

// 定义事件发射器
const emit = defineEmits(['selectSample', 'sendToolMessage']);

const systemStore = useSystemStore();

// 表单弹窗相关
const dialogVisible = ref(false);
const currentToolId = ref(0);
const currentToolName = ref('');
// const loading = ref(false)

// 点击样本处理函数
function handleSampleClick(sample: string) {
  ElMessageBox.confirm(
    `<span style="font-size: 16px;">确定要使用示例："${sample}"吗？</span>`,
    '',
    {

      dangerouslyUseHTMLString: true,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      emit('selectSample', sample);
    })
    .catch(() => {
      // 用户取消操作，不执行任何操作
    });
}

// 处理工具点击
function handleToolClick(tool: { id: number; name: string }) {
  // 直接打开弹窗，不需要预先获取工具详情
  currentToolId.value = tool.id;
  currentToolName.value = tool.name;
  dialogVisible.value = true;
}

// 处理表单提交
function handleFormSubmit(_formData: Record<string, any>, responseData: { message: string; tool_id: number }) {
  // 将返回的message作为文本内容发送，同时携带tool_id
  emit('sendToolMessage', {
    content: responseData.message,
    toolId: responseData.tool_id,
  });
}

// 处理表单取消
function handleFormCancel() {
  dialogVisible.value = false;
}
</script>

<template>
  <div class="welcome-container w-full max-w-1000px flex-col items-center justify-center text-center">
    <div
      class="welcome-text text-32px font-semibold mb-32px mt-12px leading-32px"
    >
      麻醉AI助手
    </div>

    <el-row class="w-full max-w-1000px">
      <el-col :md="8">
        <div class="feature-item">
          <div class="feature-head">
            <div class="feature-icon mb-12px">
              <el-icon :size="32" class="text-blue-500">
                <Collection />
              </el-icon>
            </div>
            <div class="feature-title text-20px font-medium mb-24px">
              例子
            </div>
          </div>
          <div class="feature-desc text-14px text-gray-500">
            <div
              v-for="(sample, index) in systemStore?.samples || []"
              :key="index"
              class="feature-desc-item cursor-pointer hover:bg-gray-200 transition-colors"
              @click="handleSampleClick(sample)"
            >
              "{{ sample }}" →
            </div>
          </div>
        </div>
      </el-col>
      <el-col :md="8">
        <div class="feature-item">
          <div class="feature-head">
            <div class="feature-icon mb-12px">
              <el-icon :size="32" class="text-blue-500">
                <SetUp />
              </el-icon>
            </div>
            <div class="feature-title text-20px font-medium mb-24px">
              能力
            </div>
          </div>
          <div class="feature-desc text-16px text-gray-500">
            <div class="feature-desc-item">
              支持多轮对话、允许追问更正
            </div>
            <div class="feature-desc-item">
              欢迎对回答评价，不定期后台奖励
            </div>
          </div>
        </div>
      </el-col>
      <el-col :md="8">
        <div class="feature-item last">
          <div class="feature-head">
            <div class="feature-icon mb-12px">
              <el-icon :size="32" class="text-blue-500">
                <Tools />
              </el-icon>
            </div>
            <div class="feature-title text-20px font-medium mb-24px">
              集成工具
            </div>
          </div>
          <div class="feature-desc text-14px text-gray-500">
            <div
              v-for="(tool, index) in systemStore.tools"
              :key="index"
              class="feature-desc-item cursor-pointer hover:bg-gray-200 transition-colors"
              @click="handleToolClick(tool)"
            >
              "{{ tool.name }}" →
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 工具表单弹窗 -->
    <ToolFormDialog
      v-model:visible="dialogVisible"
      :tool-id="currentToolId"
      :tool-name="currentToolName"
      @submit="handleFormSubmit"
      @cancel="handleFormCancel"
    />
  </div>
</template>

<style scoped lang="scss">
.welcome-container {
  padding: 60px 0 0;
  overflow-y: auto; /* 添加垂直滚动支持 */
  max-height: calc(100vh - 330px); /* 限制最大高度，避免遮挡输入框 */
}

.feature-item {
  padding: 20px 0;
  border-radius: 12px;
  padding-right: 16px;
}
.feature-item.last {
  padding-right: 0;
  padding-left: 16px;
}

.feature-desc-item {
  padding: 12px 16px;
  border-radius: 8px;
  background-color: #f5f5f5;
  margin-bottom: 10px;
  font-size: 15px;
  text-align: center;

  &:last-child {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 768px) {
  .welcome-container {
    margin-bottom: 48px;
  }
}
@media screen and (max-width: 768px) {
  .welcome-container{
    padding: 0!important;
    max-height: calc(100vh - 180px); /* 限制最大高度，避免遮挡输入框 */
  }
  .welcome-text {
    margin-bottom: 24px;
  }
  .feature-item,.feature-item.last{
    padding-right: 0!important;
    padding-left: 0!important;
  }
  .feature-item {
    padding: 8!important;
    .feature-icon {
      display: inline-block;
    }
    .feature-title {
      display: inline-block;
      margin-bottom: 12px!important;
      line-height: 32px;
      vertical-align: top;
      margin-left: 12px;
    }
  }
}
</style>
